<html>
<head>
	<link type="text/css" rel="stylesheet" href="../css/default.css" />
    <link type="text/css" rel="stylesheet" href="../js/rainbow/themes/sunburst.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
	<div class="page">
<h2>IgeAnimationComponent <span>CLASS</span></h2>
<p>Declared in <a href="../../engine/components/IgeAnimationComponent.js">IgeAnimationComponent.js</a></p>
<div class="itemBox">
	<div class="header">Description</div>
	<div class="content">The animation component class. Handles defining and controlling frame-based animations based on cells from a texture.</div>
</div>
<!--=if{extends}[-->
<div class="itemBox">
	<div class="header">Extends</div>
	<div class="content"><a href="IgeEventingClass.html">IgeEventingClass</a></div>
</div>
<!--=if{extends}]-->
<h2>Methods</h2><a name="init"></a>
<h3 class="methodTitle">init</h3>
<div class="methodSection">
    <!---->
    <div class="methodDefinition"><span class="methodName">init</span>({<span class="argType">Object</span>} <span class="argName">entity</span>, {<span class="argType">Object</span>} <span class="argName">options</span>)</div>
    <div class="methodArgs"><ul class="argList"><li>{<span class="argType">Object</span>}<span class="argName">entity</span> The parent object that this component is being added to.</li><li>{<span class="argType">Object</span>}<span class="argName">options</span> An optional object that is passed to the component when it is being initialised.</li></ul></div>
    <div class="methodReturnDesc"></div>
    
</div><a name="define"></a>
<h3 class="methodTitle">define</h3>
<div class="methodSection">
    <!--=if{desc}[-->
    <div class="methodDesc">Defines an animation specifying the frames to use, the frames per second to animate at and if the animation should loop and if so, how many times.</div>
    <!--=if{desc}]-->
    <div class="methodDefinition"><span class="methodName">define</span>({<span class="argType">String</span>} <span class="argName">id</span>, {<span class="argType">Array</span>} <span class="argName">frames</span>, {<span class="argType">Number</span>} <span class="argName">fps</span>, {<span class="argType">Number</span>} <span class="argName">loop</span>, {<span class="argType">Boolean</span>} <span class="argName">convertIdsToIndex</span>)</div>
    <div class="methodArgs"><ul class="argList"><li>{<span class="argType">String</span>}<span class="argName">id</span> The unique animation id.</li><li>{<span class="argType">Array</span>}<span class="argName">frames</span> An array of cell numbers to animate through.</li><li>{<span class="argType">Number</span>}<span class="argName">fps</span> The speed of the animation (frames per second).</li><li>{<span class="argType">Number</span>}<span class="argName">loop</span> The number of times to loop the animation, or -1 to loop forever. Defaults to -1.</li><li>{<span class="argType">Boolean</span>}<span class="argName">convertIdsToIndex</span> If true will convert cell ids to cell indexes to speed up animation processing. This is true by default but should be disabled if you intend to change the assigned texture of the entity that this animation is applied to after you have defined the animation since the frame indexes will likely map to incorrect cells on a different texture.</li></ul></div>
    <div class="methodReturnDesc">Returns {<span class="argType">*</span>} </div>
    
					<div class="methodExample">
						<div class="content"><h1>Define an animation</h1>

<pre><code>// Create an entity, add the animation component and define
// an animation using frames 1, 2, 3 and 4, with an FPS of
// 25 and looping forever (-1)
var entity = new IgeEntity()
    .addComponent(IgeAnimationComponent)
    .animation.define('anim1', [1, 2, 3, 4], 25, -1);
</code></pre>
</div>
					</div>
				
</div><a name="setFps"></a>
<h3 class="methodTitle">setFps</h3>
<div class="methodSection">
    <!--=if{desc}[-->
    <div class="methodDesc">Sets the specified animation's FPS.</div>
    <!--=if{desc}]-->
    <div class="methodDefinition"><span class="methodName">setFps</span>({<span class="argType">String</span>} <span class="argName">id</span>, {<span class="argType">Number</span>} <span class="argName">fps</span>)</div>
    <div class="methodArgs"><ul class="argList"><li>{<span class="argType">String</span>}<span class="argName">id</span> The ID of the animation to alter the FPS for.</li><li>{<span class="argType">Number</span>}<span class="argName">fps</span> The number of frames per second the animation should play at.</li></ul></div>
    <div class="methodReturnDesc">Returns {<span class="argType">*</span>} </div>
    
					<div class="methodExample">
						<div class="content"><h1>Set the specified animation's FPS</h1>

<pre><code>// Create an entity, add the animation component and define
// an animation with an FPS of 25
var entity = new IgeEntity()
    .addComponent(IgeAnimationComponent)
    .animation.define('anim1', [1, 2, 3, 4], 25, -1);

// Change the FPS to 12
entity.animation.setFps('anim1', 12);
</code></pre>
</div>
					</div>
				
</div><a name="setAllFps"></a>
<h3 class="methodTitle">setAllFps</h3>
<div class="methodSection">
    <!--=if{desc}[-->
    <div class="methodDesc">Sets all the animations assigned to an entity to the specified FPS.</div>
    <!--=if{desc}]-->
    <div class="methodDefinition"><span class="methodName">setAllFps</span>({<span class="argType">Number</span>} <span class="argName">fps</span>)</div>
    <div class="methodArgs"><ul class="argList"><li>{<span class="argType">Number</span>}<span class="argName">fps</span> The number of frames per second the animations should play at.</li></ul></div>
    <div class="methodReturnDesc">Returns {<span class="argType">*</span>} </div>
    
					<div class="methodExample">
						<div class="content"><h1>Set all entity animations to specified FPS</h1>

<pre><code>// Create an entity, add the animation component and define
// a couple of animations with an FPS of 25
var entity = new IgeEntity()
    .addComponent(IgeAnimationComponent)
    .animation.define('anim1', [1, 2, 3, 4], 25, -1);
    .animation.define('anim2', [5, 6, 7, 8], 25, -1);

// Change the FPS of all animations to 12
entity.animation.setAllFps(12);
</code></pre>
</div>
					</div>
				
</div><a name="playing"></a>
<h3 class="methodTitle">playing</h3>
<div class="methodSection">
    <!--=if{desc}[-->
    <div class="methodDesc">Checks the current animation state, either started or stopped.</div>
    <!--=if{desc}]-->
    <div class="methodDefinition"><span class="methodName">playing</span>()</div>
    <div class="methodArgs"></div>
    <div class="methodReturnDesc">Returns {<span class="argType">Boolean</span>} True if an animation is currently playing or false if not.</div>
    
</div><a name="start"></a>
<h3 class="methodTitle">start</h3>
<div class="methodSection">
    <!--=if{desc}[-->
    <div class="methodDesc">Starts an animation from the beginning frame.</div>
    <!--=if{desc}]-->
    <div class="methodDefinition"><span class="methodName">start</span>({<span class="argType">String</span>} <span class="argName">animId</span>, {<span class="argType">Object</span>} <span class="argName">options</span>)</div>
    <div class="methodArgs"><ul class="argList"><li>{<span class="argType">String</span>}<span class="argName">animId</span> The id of the animation to start.</li><li>{<span class="argType">Object</span>}<span class="argName">options</span> An object with some option properties.</li></ul></div>
    <div class="methodReturnDesc">Returns {<span class="argType">*</span>} </div>
    
					<div class="methodExample">
						<div class="content"><h1>Start an animation</h1>

<pre><code>// Create an entity, add the animation component, define
// an animation and then start it
var entity = new IgeEntity()
    .addComponent(IgeAnimationComponent)
    .animation.define('anim1', [1, 2, 3, 4], 25, -1);

entity.animation.start('anim1');
</code></pre>
</div>
					</div>
				
					<div class="methodExample">
						<div class="content"><h1>Start an animation with callbacks for animation events</h1>

<pre><code>// Create an entity, add the animation component, define
// an animation and then start it
var entity = new IgeEntity()
    .addComponent(IgeAnimationComponent)
    .animation.define('anim1', [1, 2, 3, 4], 25, -1);

// In each animation callback...
// this = the entity's animation component instance
// anim = the animation component's _anim object
// this._entity = the entity the animation is attached to

entity.animation.start('anim1', {
        onLoop: function (anim) {
            console.log('Animation looped', this, anim);    
        },
        onStopped: function (anim) {
            console.log('Animation stopped', this, anim);   
        },
        onComplete: function (anim) {
            console.log('Animation completed', this, anim); 
        }
});
</code></pre>
</div>
					</div>
				
					<div class="methodExample">
						<div class="content"><h1>Start an animation with callbacks for animation events via event listeners</h1>

<pre><code>// Create an entity, add the animation component, define
// an animation and then start it
var entity = new IgeEntity()
    .addComponent(IgeAnimationComponent)
    .animation.define('anim1', [1, 2, 3, 4], 25, -1);

// In each animation callback...
// this = the entity's animation component instance
// anim = the animation component's _anim object
// this._entity = the entity the animation is attached to

entity.animation.on('started', function (anim) {
        console.log('Animation started', this, anim);   
});

entity.animation.on('loopComplete', function (anim) {
        console.log('Animation looped', this, anim);    
});

entity.animation.on('stopped', function (anim) {
        console.log('Animation stopped', this, anim);   
});

entity.animation.on('complete', function (anim) {
        console.log('Animation complete', this, anim);  
});

entity.animation.start('anim1');
</code></pre>
</div>
					</div>
				
</div><a name="select"></a>
<h3 class="methodTitle">select</h3>
<div class="methodSection">
    <!--=if{desc}[-->
    <div class="methodDesc">Starts an animation only if the passed animation is not already started.</div>
    <!--=if{desc}]-->
    <div class="methodDefinition"><span class="methodName">select</span>({<span class="argType">String</span>} <span class="argName">animId</span>, {<span class="argType">Object</span>} <span class="argName">options</span>)</div>
    <div class="methodArgs"><ul class="argList"><li>{<span class="argType">String</span>}<span class="argName">animId</span> The id of the animation to start.</li><li>{<span class="argType">Object</span>}<span class="argName">options</span> An object with some option properties.</li></ul></div>
    <div class="methodReturnDesc">Returns {<span class="argType">*</span>} </div>
    
					<div class="methodExample">
						<div class="content"><h1>Select an animation</h1>

<pre><code>// Create an entity, add the animation component, define
// an animation and then select it
var entity = new IgeEntity()
    .addComponent(IgeAnimationComponent)
    .animation.define('anim1', [1, 2, 3, 4], 25, -1);

entity.animation.select('anim1');

// Selecting the same animation twice will NOT reset the
// animation because it is already playing. This is how
// select() differs from start()
entity.animation.select('anim1');
</code></pre>
</div>
					</div>
				
</div><a name="stop"></a>
<h3 class="methodTitle">stop</h3>
<div class="methodSection">
    <!--=if{desc}[-->
    <div class="methodDesc">Stops the current animation.</div>
    <!--=if{desc}]-->
    <div class="methodDefinition"><span class="methodName">stop</span>()</div>
    <div class="methodArgs"></div>
    <div class="methodReturnDesc">Returns {<span class="argType">*</span>} </div>
    
					<div class="methodExample">
						<div class="content"><h1>Stop the current animation</h1>

<pre><code>entity.animation.stop();
</code></pre>
</div>
					</div>
				
</div><a name="_update"></a>
<h3 class="methodTitle">_update</h3>
<div class="methodSection">
    <!--=if{desc}[-->
    <div class="methodDesc">Handles the animation processing each update.</div>
    <!--=if{desc}]-->
    <div class="methodDefinition"><span class="methodName">_update</span>({<span class="argType">CanvasRenderingContext2D</span>} <span class="argName">ctx</span>)</div>
    <div class="methodArgs"><ul class="argList"><li>{<span class="argType">CanvasRenderingContext2D</span>}<span class="argName">ctx</span> The rendering context to use when doing draw operations.</li></ul></div>
    <div class="methodReturnDesc"></div>
    
</div>	</div>
    <script type="text/javascript">
        $(function () {
            $('code').attr('data-language', 'javascript');
        });
    </script>
    <script type="text/javascript" src="../js/rainbow/rainbow-custom.min.js"></script>
</body>
</html>